<style include="cr-actionable-row-style settings-shared iron-flex">
  :host {
    padding: 0 var(--cr-section-padding);
  }

  :host([elide-label]),
  :host([elide-label]) #outerRow,
  :host([elide-label]) #outerRow > div.flex {
    min-width: 0;
  }

  :host([elide-label]) .label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #outerRow {
    align-items: center;
    display: flex;
    min-height: var(--settings-row-two-line-min-height);
    width: 100%;
  }

  #outerRow[noSubLabel] {
    min-height: var(--settings-row-min-height);
  }

  #labelWrapper {
    padding: var(--cr-section-vertical-padding) 0;
  }

  #labelWrapper,
  ::slotted([slot='more-actions']) {
    margin-inline-end: var(--settings-control-label-spacing) !important;
  }

  cr-policy-pref-indicator {
    margin-inline-end: var(--settings-controlled-by-spacing);
  }
</style>
<div id="outerRow" noSubLabel$="[[!subLabel]]">
  <div class="flex" id="labelWrapper" hidden$="[[!label]]">
    <div class="label" aria-hidden="true">[[label]]</div>
    <div class="secondary label" id="sub-label">
      <template is="dom-if" if="[[subLabelIcon]]">
        <span id="sub-label-icon" aria-hidden="true">
          <iron-icon slot="icon" icon="[[subLabelIcon]]">
          </iron-icon>
        </span>
      </template>
      <span id="sub-label-text" aria-hidden="true">
        [[subLabel]]
      </span>
      <template is="dom-if" if="[[learnMoreUrl]]">
        <a id="learn-more" href="[[learnMoreUrl]]" target="_blank"
            aria-labelledby="sub-label-text learn-more"
            on-click="onLearnMoreClick_">
          $i18n{learnMore}
        </a>
      </template>
<if expr="chromeos">
      <template is="dom-if" if="[[subLabelWithLink]]">
        <div id="sub-label-text-with-link" aria-hidden="true"
            inner-h-t-m-l="[[getSubLabelWithLinkContent_(subLabelWithLink)]]"
            on-click="onSubLabelTextWithLinkClick_">
        </div>
      </template>
</if>
    </div>
  </div>
  <slot name="more-actions"></slot>
  <template is="dom-if" if="[[hasPrefPolicyIndicator(pref.*)]]">
    <cr-policy-pref-indicator pref="[[pref]]" icon-aria-label="[[label]]">
    </cr-policy-pref-indicator>
  </template>
  <cr-toggle id="control" checked="{{checked}}"
      on-change="onChange_"
      aria-label$="[[getAriaLabel_(label, ariaLabel)]]"
      aria-describedby="sub-label-text"
      disabled="[[controlDisabled(disabled, pref)]]">
  </cr-toggle>
</div>
